<template>
	<view>
		<uni-search-bar @confirm="hnadleConfirm" placeholder="请搜索内容" v-model="searchValue" @input="handleInput"></uni-search-bar>
		<!-- 商品搜索列表 -->
		<view class="" v-if="isSearch">
			<view class="list-item" v-for="(item, index ) in commendList" :key="index">
				<image :src="item.image" mode=""></image>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</view>
		</view>
		<!-- 关键字列表 -->
		<uni-group v-else v-show="searchValue.length" mode="card" title="关键字列表">
			<view class="cart-item" v-for="(item, index) in commendList" :key="index">
				<rich-text :nodes="item.title"></rich-text>
			</view>
		</uni-group>
		
		<!-- 搜索记录 -->
		<uni-group v-if="!commendList.length" mode="card" title="搜索记录">
			<view class="cart-item" v-for="(item, index) in historyRecord" :key="index">
				<text>{{item.value}}</text>
			</view>
		</uni-group>
	
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		debounce
	} from '../../utils/index.js';
	const isSearch = ref(false)
	const searchValue = ref('')
	const commendList = ref([])
	const historyRecord = ref([])
	const getHistoryRecord = async () => {
		const resp = await uniCloud.database().collection('historyRecord').get();
		historyRecord.value = resp.result.data;
	}
	getHistoryRecord()
	const hnadleConfirm = (value) => {
		isSearch.value = true;
		
		uniCloud.database().collection('historyRecord').add(value);
	}	
	
	const handleInput = debounce(async (value) => {
		isSearch.value = false;
		const resp = await uniCloud.callFunction({
			name: 'searchGoodList',
			data: {
				searchValue: searchValue.value
			}
		})
		// resp.result.data.forEach(v => {
		// 	v.title = v.title.replace(value, `<span style="color: red">${value}</span>`)
		// })
		commendList.value = resp.result.data
	})
</script>

<style lang="scss">
	.cart-item {
		border-bottom: 1px solid #ccc;
		line-height: 60rpx;
		height: 60rpx;
	}
	
	.list-item {
		display: flex;
		image {
			width: 300rpx;
			height: 300rpx;
			flex-shrink: 0;
		}
		
		.right {
			marign-left: 10rpx;
		}
	}
</style>